<!doctype html>
<html>
<head>
  <title>Name Comp: Name From Content</title>
  <meta charset="utf-8">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <script src="/resources/testdriver-actions.js"></script>
  <script src="/wai-aria/scripts/aria-utils.js"></script>
  <style type="text/css">

     /*

      Since the AccName spec is in flux about whitespace joiners, and the implementations don't match,
      normalize the whitespace (with extra leading/trailing) space.

      No point in having the same in-flux spec change cause failures the remaining unrelated tests.

      See more here:
      https://github.com/w3c/accname/issues/205
      https://github.com/w3c/accname/projects/1#card-42288231

    */

    .simple-before::before {
      content: " before "; /* [sic] leading and trailing space */
      margin:0 0.1em;
    }
    .simple-after::after {
      content: " after "; /* [sic] leading and trailing space */
      margin:0 0.1em;
    }
    .no-space::before, .no-space::after {
      content: "nospace"; /* [sic] Unlike the others, NO extra leading/trailing space here. */
    }
    .simple-before:dir(rtl)::before {
      content: " من قبل "; /* [sic] leading and trailing space */
    }
    .simple-after:dir(rtl)::after {
      content: " بعد "; /* [sic] leading and trailing space */
    }
    .fallback-before::before {
      content: " before "; /* [sic] leading and trailing space */
      content: " before " / " alt-before "; /* Override the previous line for engines that support the Alternative Text syntax. */
    }
    .fallback-after::after {
      content: " after "; /* [sic] leading and trailing space */
      content: " after " / " alt-after "; /* Override the previous line for engines that support the Alternative Text syntax. */
    }
    .fallback-before-empty::before {
      content: "before"  / "";
    }
    .fallback-before-image-empty::before {
      content: "before " url(/images/blue.png) / "";
    }
    .fallback-before-mixed::before {
      content: " before "; /* [sic] leading and trailing space */
      content: " before " / " start " attr(data-alt-text-before) " end "; /* Override the previous line for engines that support the Alternative Text syntax. */
    }
    .fallback-after-mixed::after {
      content: " after "; /* [sic] leading and trailing space */
      content: " after " / " start " attr(data-alt-text-after) " end "; /* Override the previous line for engines that support the Alternative Text syntax. */
    }
    .block > span {
      display: block;
      margin: 0 0.1em;
    }
    .iblock > span {
      display: inline-block;
      margin: 0 0.1em;
    }

  </style>
</head>
<body>

<p>Tests the <a href="https://w3c.github.io/accname/#comp_name_from_content">#comp_name_from_content</a> portions of the AccName <em>Name Computation</em> algorithm.</p>

<p>This series of tests exercises the button, heading, and link elements, because each have different characteristics worthy of testing in each of the name computation algorithm scenarios:</p>
<ul>
  <li>button is a leaf node with sub-level elements presentational.</li>
  <li>heading is block level, and can contain sub-level interactives like links.</li>
  <li>link (a[href]) is an interactive inline element that can include non-presentational descendants.</li>
</ul>

<h1>ARIA roles, inline</h1>
<span tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, inline" class="ex">label</span><br>
<span tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, inline" class="ex">label</span><br>
<span tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, inline" class="ex">label</span><br>
<br>

<h1>ARIA roles, block</h1>
<div tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, block" class="ex">label</div>
<div tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, block" class="ex">label</div>
<div tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, block" class="ex">label</div>
<br>

<h1>simple</h1>
<button data-expectedlabel="label" data-testname="button name from content" class="ex">label</button><br>
<h3 data-expectedlabel="label" data-testname="heading name from content" class="ex">label</h3>
<a href="#" data-expectedlabel="label" data-testname="link name from content" class="ex">label</a><br>
<br>

<h1>simple with ::before</h1>
<button data-expectedlabel="before label" data-testname="button name from content with ::before" class="ex simple-before">label</button><br>
<h3 data-expectedlabel="before label" data-testname="heading name from content with ::before" class="ex simple-before">label</h3>
<a href="#" data-expectedlabel="before label" data-testname="link name from content with ::before" class="ex simple-before">label</a><br>
<br>

<h1>simple with ::after</h1>
<button data-expectedlabel="label after" data-testname="button name from content with ::after" class="ex simple-after">label</button><br>
<h3 data-expectedlabel="label after" data-testname="heading name from content with ::after" class="ex simple-after">label</h3>
<a href="#" data-expectedlabel="label after" data-testname="link name from content with ::after" class="ex simple-after">label</a><br>
<br>

<h1>simple with ::before and ::after</h1>
<button data-expectedlabel="before label after" data-testname="button name from content with ::before and ::after" class="ex simple-before simple-after">label</button><br>
<h3 data-expectedlabel="before label after" data-testname="heading name from content with ::before and ::after" class="ex simple-before simple-after">label</h3>
<a href="#" data-expectedlabel="before label after" data-testname="link name from content with ::before and ::after" class="ex simple-before simple-after">label</a><br>
<br>

<h1>no space joiners ::before and ::after</h1>
<button data-expectedlabel="nospacelabelnospace" data-testname="button name from content no space joiners ::before and ::after" class="ex no-space">label</button><br>
<h3 data-expectedlabel="nospacelabelnospace" data-testname="heading name from content no space joiners ::before and ::after" class="ex no-space">label</h3>
<a href="#" data-expectedlabel="nospacelabelnospace" data-testname="link name from content no space joiners ::before and ::after" class="ex no-space">label</a><br>
<br>

<h1>Arabic right-to-left (RTL) with ::before and ::after</h1>
<div dir="rtl" lang="ar">
  <button data-expectedlabel="من قبل اسم بعد" data-testname="button name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</button><br>
  <h3 data-expectedlabel="من قبل اسم بعد" data-testname="heading name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</h3>
  <a href="#" data-expectedlabel="من قبل اسم بعد" data-testname="link name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</a><br>
</div>
<br>

<h1><a href="https://drafts.csswg.org/css-content/#alt">Alternative Text for  CSS content (previously `alt:`)</a> in pseudo-elements</h1>
<p>rendered text should be "before label after"</p>
<p>accessibility label should be "alt-before label alt-after"</p>
<button data-expectedlabel="alt-before label alt-after" data-testname="button name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</button><br>
<h3 data-expectedlabel="alt-before label alt-after" data-testname="heading name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</h3>
<a href="#" data-expectedlabel="alt-before label alt-after" data-testname="link name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</a><br>
<br>

<h1><a href="https://drafts.csswg.org/css-content/#alt">Mixed Alternative Text (attr() and strings) for  CSS content (previously `alt:`)</a> in pseudo-elements</h1>
<p>rendered text should be "before label after"</p>
<p>accessibility label should be "start alt-before end label start alt-after end"</p>
<button data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="button name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</button><br>
<h3 data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="heading name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</h3>
<a href="#" data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="link name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</a><br>
<br>

<h1>Empty alternative text for CSS content in pseudo-elements when applied to primitive appearance form controls</h1>
<p><input data-expectedlabel="" data-testname="primitive radio input with ::before containing empty alternative text" class="ex fallback-before-empty" type=radio style=appearance:none>
<p><input data-expectedlabel="" data-testname="primitive radio input with ::before containing empty alternative text for an image" class="ex fallback-before-image-empty" type=radio style=appearance:none>

<h1>simple w/ for each child</h1>
<button data-expectedlabel="one two three" data-testname="button name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></button><br>
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></h3>
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></a><br>
<br>

<h1>simple for each child with image</h1>
<button data-expectedlabel="one two three" data-testname="button name from content for each child including image" class="ex"><span>one</span> <img alt="two" src=""> <span>three</span></button><br>
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child including image" class="ex"><span>one</span> <img alt="two" src=""> <span>three</span></h3>
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child including image" class="ex"><span>one</span> <img alt="two" src=""> <span>three</span></a><br>
<br>


<h1>simple for each child with extra nesting containing image</h1>
<button data-expectedlabel="one two three four" data-testname="button name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src=""></span> <span>four</span></button><br>
<h3 data-expectedlabel="one two three four" data-testname="heading name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src=""></span> <span>four</span></h3>
<a href="#" data-expectedlabel="one two three four" data-testname="link name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src=""></span> <span>four</span></a><br>
<br>

<h1>heading with nested button with nested image</h1>
<h3 data-expectedlabel="heading button image button heading" data-testname="heading name from content for each child including nested button with nested image" class="ex">
  heading
  <button>
    button
    <img alt="image" src="">
    button
  </button>
  heading
</h3>

<h1>heading with nested link with nested image</h1>
<h3 data-expectedlabel="heading link image link heading" data-testname="heading name from content for each child including nested link with nested image" class="ex">
  heading
  <a href="#">
    link
    <img alt="image" src="">
    link
  </a>
  heading
</h3>

<h1>heading with nested link with nested image using aria-label</h1>
<h3 data-expectedlabel="heading link aria-label heading" data-testname="heading name from content for each child including nested link using aria-label with nested image" class="ex">
  heading
  <a href="#" aria-label="link aria-label"><!-- should skip the other link text -->
    ignored link text
    <img id="nested_image_label_1" alt="ignored image alt" src="">
    ignored link text
  </a>
  heading
</h3>

<h1>heading with nested link with nested image using aria-labelledby</h1>
<h3 data-expectedlabel="heading image heading" data-testname="heading name from content for each child including nested link using aria-labelledby with nested image" class="ex">
  heading
  <a href="#" aria-labelledby="nested_image_label1"><!-- should skip the other link text -->
    ignored link text
    <img id="nested_image_label1" alt="image" src="">
    ignored link text
  </a>
  heading
</h3>

<h1>heading with two nested links referencing image using aria-labelledby</h1>
<h3 data-expectedlabel="image link2 link3" data-testname="heading name from content for each child including two nested links using aria-labelledby with nested image" class="ex">
  <a href="#" aria-labelledby="nested_image_label2">
    link1<!-- this text is skipped because of aria-labelledby -->
  </a>
  <a href="#" data-expectedlabel="link2 image link3" data-testname="link name from content for each child including nested image (referenced elsewhere via labelledby)" class="ex">
    link2
    <img id="nested_image_label2" alt="image" src="">
    <!-- image skipped in this link (when computing heading text) because it was already referenced by the first link within this heading label recursion cycle. -->
    <!-- but image not skipped when computing the text of the link itself since it has not been referenced in that context -->
    link3
  </a>
</h3>


<!-- Note: The following test is out of line with the spec, but matching two out of three implementations at the time of writing, and spec changes are expeected. -->
<!-- See details in https://github.com/w3c/accname/issues/205 -->
<!-- Final spec resolution will be addressed in AccName Whitespace Project: https://github.com/w3c/accname/projects/1#card-42288231 -->
<h1>simple w/ for each child (w/o spaces and display:inline)</h1>
<button data-expectedlabel="onetwothree" data-testname="button name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></button><br>
<h3 data-expectedlabel="onetwothree" data-testname="heading name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></h3>
<a href="#" data-expectedlabel="onetwothree" data-testname="link name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></a><br>
<br>

<h1>simple w/ for each child (w/o spaces and display:block)</h1>
<button data-expectedlabel="one two three" data-testname="button name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></button><br>
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></h3>
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></a><br>
<br>

<h1>simple w/ for each child (w/o spaces and display:inline block)</h1>
<button data-expectedlabel="one two three" data-testname="button name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></button><br>
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></h3>
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></a><br>
<br>


<!-- TODO: Add clarification to the Name from Content section of accname. -->
<!--       If an element’s text node is transformed with CSS text-transform, -->
<!--       what should be exposed to the a11y tree? The original text or the -->
<!--       transformed text? These tests assume the *original* text. -->

<h1 data-expectedlabel="Call us" data-testname="heading name from content with text-transform:none" class="ex" style="text-transform:none;">Call us</h1>
<h1 data-expectedlabel="CALL US" data-testname="heading name from content with text-transform:uppercase" class="ex" style="text-transform:uppercase;">Call us</h1>
<h1 data-expectedlabel="Call Us" data-testname="heading name from content with text-transform:capitalize" class="ex" style="text-transform:capitalize;">Call us</h1>
<h1 data-expectedlabel="call us" data-testname="heading name from content with text-transform:lowercase" class="ex" style="text-transform:lowercase;">Call us</h1>

<script>
AriaUtils.verifyLabelsBySelector(".ex");
</script>
</body>
</html>
